<template>
  <div
    v-if="messageConfig.show"
    class="secure-message flex align-center justify-center gc-8 slide-in"
  >
    {{ messageConfig.content }}
  </div>
</template>

<script setup lang="ts">
  import { messageConfig } from './bus';
</script>

<style lang="scss" scoped>
  .secure-message {
    position: fixed;
    min-width: 200px;
    left: calc(50% - 100px);
    top: 20px;
    border: 1px solid #eee;
    background-color: white;
    z-index: 10;
    padding: 12px var(--padding);
    border-radius: var(--radius);
    text-align: center;
    background-repeat: no-repeat;
    background-color: #121212;
    color: white;
    background-position: bottom;
  }
</style>
